<template>
    <div class="page-body" style="display: flex;flex-direction: column;">
        <div class="header-container-class">
            <div style="display: flex">
                <span>轩儿的数学题</span>
                <span style="flex: 1"></span>
                <el-form ref="form" label-width="80px" inline>
                    <el-form-item label="运算方式:">
                        <el-select style="width: 120px" v-model="mathConfig.optMode" placeholder="请选择">
                            <el-option label="加减法" :value="1"></el-option>
                            <el-option label="乘除法" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="最小数:">
                        <el-input-number v-model.trim="mathConfig.min" :controls="false" :min="1" placeholder="最小值"></el-input-number>
                    </el-form-item>
                    <el-form-item label="最大数:">
                        <el-input-number v-model.trim="mathConfig.max" :controls="false" :min="1" placeholder="最大值"></el-input-number>
                    </el-form-item>
                    <el-form-item label="题目数:">
                        <el-input-number v-model.trim="mathConfig.count" :controls="false" :min="1" placeholder="题目数"></el-input-number>
                    </el-form-item>
                </el-form>
                <el-button @click="refresh('刷新成功!')" type="primary"> 刷新题目</el-button>
                <el-button @click="checkAnswer" type="warning"> 判断对错</el-button>
            </div>
            <el-divider></el-divider>
        </div>
        <div style="display: flex;flex-wrap: wrap;overflow-y: auto;">
            <template v-for="(item,index) in group" :key="index">
                <div :class="{'odd-class':index%2===0}" style="display: flex;height:60px;width: 25%;justify-content: center;align-items: center; border: 1px solid #ededed">
					<span class="form-item-default" style="min-width: 22.5%;">
						<span v-if="item.randomSpace!==0" class="default-input-number" style="text-align: center">{{ item.nums[0] }}</span>
						<span v-else>
						<span>(</span>
						<el-input-number v-model="item.input" class="default-input-number" :class="{'default-input-number-odd':index%2===0}" :controls="false" placeholder=""></el-input-number>
						<span>)</span>
					</span>
						<span v-if="['+','-'].includes(item.opt)" style="display:inline-block;width: 30px;text-align: center ;font-size: 16px; ">{{ item.opt }}</span>
						<span v-if="['*'].includes(item.opt)" style="display:inline-block;width: 30px;text-align: center ;font-size: 16px; ">×</span>
						<span v-if="['/',].includes(item.opt)" style="display:inline-block;width: 30px;text-align: center ;font-size: 16px; ">÷</span>
						<span v-if="item.randomSpace!==1" class="default-input-number" style="text-align: center">{{ item.nums[1] }}</span>
						<span v-else>
						<span>(</span>
						<el-input-number v-model="item.input" class="default-input-number" :class="{'default-input-number-odd':index%2===0}" :controls="false" placeholder=""></el-input-number>
						<span>)</span>
					</span>
						<span style="display:inline-block;width: 30px;text-align: center"> = </span>
						<span v-if="item.randomSpace!==2" class="default-input-number" style="text-align: center">{{ item.nums[2] }}</span>
						<span v-else>
						<span>(</span>
						<el-input v-model="item.input" class="default-input-number" :class="{'default-input-number-odd':index%2===0}" :controls="false" placeholder=""></el-input>
						<span>)</span>
					</span>
						<span v-if="isOk" style="margin-left:10px">
						<el-tag v-if="item.nums[item.randomSpace]==`${item.input}`" type="success">正确</el-tag>
						<el-tag v-else type="danger">答案: {{ item.nums[item.randomSpace] }}</el-tag>
					</span>
					</span>
                </div>
            </template>
        </div>
    </div>
</template>
<script setup lang="ts">
import {throttle,} from 'lodash-es'
import {computed, onMounted, onUnmounted, reactive, type Ref, ref, watch} from 'vue'
import {ElMessage} from "element-plus";
import defineGlobalStance from "@utils/global-property"
import {useMathConfig} from "@stores/math-config";

const mathConfigRef = useMathConfig()

interface GroupItem {
    nums?: string[],
    input?: number
    opt?: string
    randomSpace?: number
}

const {globalConfig} = defineGlobalStance()

//判断对错
const isOk = ref(false)
const mathConfig = mathConfigRef.mathConfig

//数据源
let group: Ref<GroupItem[]> = ref([])

watch(mathConfig, () => {
    mock("")
})
const optGroup = computed(() => mathConfig.optMode === 1 ? ['+', '-'] : ['*', '/'])

/**
 * 生成随机数据
 * @param tip
 */
function mock(tip: string) {
    isOk.value = false
    group.value = []
    let countTemp = 0
    while (true) {
        let numGroup = []
        numGroup.push(Math.floor(Math.random() * (mathConfig.max - mathConfig.min) + mathConfig.min))
        numGroup.push(Math.floor(Math.random() * (mathConfig.max - mathConfig.min) + mathConfig.min))
        let item: GroupItem = {
            input: undefined,
            opt: optGroup.value[Math.floor(Math.random() * optGroup.value.length)],
            randomSpace: Math.floor(Math.random() * 3),
        }
        let a = Number(eval(numGroup[0] + item.opt + numGroup[1]))
        //加减乘走这里
        if (globalConfig.$numTool.numbersCloseEnoughToEqual(a, Number.parseInt(`${a}`))) {
            numGroup.push(a)
            if (numGroup[2] >= 0) {
                item.nums = numGroup
                group.value.push(item)
                countTemp++
            }
        } else {
            //除法才有可能走这里
            let gcd1 = globalConfig.$numTool.gcd(numGroup[0], numGroup[1])
            numGroup.push(`${numGroup[0] / gcd1}/${numGroup[1] / gcd1}`)
            item.randomSpace = Math.floor(Math.random() * 3)
            item.nums = numGroup
            group.value.push(item)
            countTemp++
        }
        if (countTemp >= mathConfig.count) {
            break
        }
    }
    if (tip) {
        ElMessage.success(tip)
    }
}


/**
 * 刷新
 */
const refresh = throttle(mock, 1500, {trailing: false})

/**
 * 批改答案
 */
const checkAnswer = throttle(() => {
    isOk.value = !isOk.value
}, 1500, {trailing: false})

onMounted(() => {
    mock("")
    // console.log("测试消息：",mathConfigRef)
    // document.getElementById('__vconsole').style.display = 'none';
})
</script>

<style scoped lang="scss">
$bg_color: white;
$odd_color: #fafafa;

.page-body {
    padding: 20px;
    height: 100%;
    width: 100%;
    background-color: $bg_color;
}


.default-input-number {
    width: 40px;
    display: inline-block;

    :deep(.el-input__wrapper) {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    :deep(.el-input__inner) {
        text-align: center;
    }
}

.default-input-number-odd {
    :deep(.el-input__wrapper) {
        background-color: $odd_color;
    }

}

.odd-class {
    background-color: $odd_color;
}

/* 在打印时隐藏 id 为 'print-hide' 的 div */
@media print {
    .header-container-class {
        display: none;
    }
}


</style>
